<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06 浮动的练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        img {
            display: block;
        }
        
        a {
            text-decoration: none;
            color: #666;
        }
        
        h1,
        h2,
        h3 {
            font-size: 16px;
        }
        
        .l {
            float: left;
        }
        
        .r {
            float: right;
        }
        
        .clear:after {
            content: "";
            display: block;
            clear: both;
        }
        
        #main {
            width: 366px;
            margin: 20px auto;
        }
        
        #main .title {
            height: 23px;
            line-height: 23px;
            font-size: 12px;
            font-weight: bold;
            padding-left: 30px;
            background: url(./img2/logo.png) no-repeat 6px 4px url(./img2/224.bmp) repeat-x;
        }
        
        #main ul {
            overflow: hidden;
            margin: 13px;
        }
        
        #main li {
            margin-bottom: 22px;
        }
        
        #main .pic {
            width: 99px;
            border: 1px solid #c8c4d3;
        }
        
        #main .pic img {
            width: 95px;
            margin: 2px;
        }
        
        #main .content {
            width: 240px;
            line-height: 20px;
            margin-left: 13px;
        }
        
        #main .content h2 {
            font-size: 12px;
            height: 24px;
        }
        
        #main .content p {
            font-size: 12px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div id="main">
        <h2 class="title">外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/f83f-fe2efd32ff9802b28fb528bb3e74fd8f.gif" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>after伪类:推荐,是空标签的加强版,目前各大公司的做法; ...
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/f83f-fe2efd32ff9802b28fb528bb3e74fd8f.gif" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>after伪类:推荐,是空标签的加强版,目前各大公司的做法; ...
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/f83f-fe2efd32ff9802b28fb528bb3e74fd8f.gif" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>after伪类:推荐,是空标签的加强版,目前各大公司的做法; ...
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>